import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import type { TableColumnCtx } from "element-plus";
import { defineComponent } from "vue";

export default defineComponent({
  setup(): () => JSX.Element {
    const proTable = ref<ProTableInstance>();

    // 新建默认数据
    const initData = reactive({
      reportId: 108,
      appointType: 1
    });

    const columns: ColumnProps<Inventory.ResCustomList>[] = [
      {
        type: "index",
        label: "序号",
        width: 80,
        search: {
          el: "date-picker",
          label: "日期",
          minWidth: 164,
          key: "dataTimeRange",
          defaultValue: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
          props: {
            type: "datetimerange",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD"
          }
        }
      },
      // {
      //   sortable: true,
      //   prop: "businessDate",
      //   label: "营业日期"
      // },
      {
        sortable: true,
        prop: "departName",
        label: "部门名称"
      },
      {
        sortable: true,
        prop: "amount",
        label: "营业额"
      },
      {
        sortable: true,
        prop: "allAmount",
        label: "营业收入"
      },
      {
        sortable: true,
        prop: "reduceAmount",
        label: "优惠金额"
      },
      {
        sortable: true,
        prop: "quantity",
        label: "销售数量"
      }
      // { sortable: true, prop: "storeName", label: "门店名称", minWidth: 120, align: "left" }
    ];

    // 合计
    interface SummaryMethodProps<T = any> {
      columns: TableColumnCtx<T>[];
      data: T[];
    }
    const summary = ref<any[]>([]);
    const dataCallback = (data: any) => {
      // console.log(data);
      summary.value = data.summary;
      return {
        list: data.list,
        total: data.total,
        pageNum: data.pageNum,
        pageSize: data.pageSize
      };
    };

    const getSummaries = (param: SummaryMethodProps) => {
      return summary.value;
    };

    return () => (
      <div class="table-box">
        <ProTable
          ref={proTable}
          title="历史账单"
          row-key="id"
          columns={columns}
          request-api={getPageReport}
          init-param={initData}
          summary-method={getSummaries}
          data-callback={dataCallback}
        ></ProTable>
      </div>
    );
  }
});
